<template>
  <div class="root">
    <div class="container">
      <!-- 左边三模块 -->
      <div class="content">
        <div class="statistics">
          <!-- 工单统计 -->
          <div class="workOrder">
            <div class="header">
              <span class="title">工单统计</span>
              <span class="time">{{ start }} ~ {{ end }}</span>
            </div>

            <div class="data">
              <ul>
                <li>
                  <p class="num">{{ workOrderTotal }}</p>
                  <p class="type">工单总数 (个)</p>
                </li>

                <li>
                  <p class="num">{{ completedWorkOrder }}</p>
                  <p class="type">完成工单 (个)</p>
                </li>

                <li>
                  <p class="num">{{ runWorkOrder }}</p>
                  <p class="type">进行工单 (个)</p>
                </li>

                <li>
                  <p class="num">{{ cancelWorkOrder }}</p>
                  <p class="type">取消工单 (个)</p>
                </li>
              </ul>
            </div>
          </div>

          <!-- 销售统计 -->
          <div class="sell">
            <div class="header">
              <span class="title">销售统计</span>
              <span class="time">{{ start }} ~ {{ end }}</span>
            </div>
            <div class="data">
              <ul>
                <li>
                  <p class="num">{{ count }}</p>
                  <p class="type">订单量 (个)</p>
                </li>
                <li>

                  <p class="num">{{ (income / 100).toFixed(2) }}</p>
                  <p class="type">销售额 (个)</p>
                </li>
              </ul>
            </div>

          </div>
        </div>

        <!-- 销售数据 -->
        <div class="sellData">
          <div class="sellNav">
            <div class="left">
              <span class="title">销售数据</span>
              <span class="time">{{ sellStart }} ~ {{ sellEnd }}</span>
            </div>

            <div class="right">
              <ul>
                <li ref="week" :class="{active: flag === '周'}" @click="selectTime('周')">周</li>
                <li :class="{active: flag === '月'}" @click="selectTime('月')">月</li>
                <li :class="{active: flag === '年'}" @click="selectTime('年')">年</li>
              </ul>
            </div>
          </div>

          <div class="chart">
            <!-- 销售额趋势图 -->
            <div ref="brokenLine" class="tendencyChart">
              <!-- 销售额趋势图 -->
            </div>

            <!-- 销售额分布 -->
            <div ref="columnar" class="distribution">
              <!-- 销售额分布图 -->
            </div>
          </div>
        </div>
      </div>

      <!-- 商品热榜 -->
      <div class="sideModule">
        <div class="head">
          <span class="title">商品热榜</span>
          <span class="time">{{ start }} ~ {{ end }}</span>
        </div>

        <div class="hotGoods">
          <ul>
            <li>
              <span class="goodBgc first">1</span>
              <span class="good">{{ hotList[0].skuName }}</span>
              <span class="count">{{ hotList[0].count }}单</span>
            </li>
            <li>
              <span class="goodBgc second">2</span>
              <span class="good">{{ hotList[1].skuName }}</span>
              <span class="count">{{ hotList[1].count }}单</span>
            </li>
            <li>
              <span class="goodBgc third">3</span>
              <span class="good">{{ hotList[2].skuName }}</span>
              <span class="count">{{ hotList[2].count }}单</span>
            </li>

            <li>
              <span class="goodBgc last">4</span>
              <span class="good">{{ hotList[3].skuName }}</span>
              <span class="count">{{ hotList[3].count }}单</span>
            </li>

            <li>
              <span class="goodBgc last">5</span>
              <span class="good">{{ hotList[4].skuName }}</span>
              <span class="count">{{ hotList[4].count }}单</span>
            </li>

            <li>
              <span class="goodBgc last">6</span>
              <span class="good">{{ hotList[5].skuName }}</span>
              <span class="count">{{ hotList[5].count }}单</span>
            </li>

            <li>
              <span class="goodBgc last">7</span>
              <span class="good">{{ hotList[6].skuName }}</span>
              <span class="count">{{ hotList[6].count }}单</span>
            </li>

            <li>
              <span class="goodBgc last">8</span>
              <span class="good">{{ hotList[7].skuName }}</span>
              <span class="count">{{ hotList[7].count }}单</span>
            </li>

            <li>
              <span class="goodBgc last">9</span>
              <span class="good">{{ hotList[8].skuName }}</span>
              <span class="count">{{ hotList[8].count }}单</span>
            </li>

            <li>
              <span class="goodBgc last">10</span>
              <span class="good">{{ hotList[9].skuName }}</span>
              <span class="count">{{ hotList[9].count }}单</span>
            </li>
          </ul>
        </div>
        <!-- 商品热榜 -->
      </div>
    </div>

    <div class="footer">
      <div class="cooperation">
        <div class="head">
          <span class="title">合作商点位数Top5</span>
          <span class="iconfont icon-gengduo icon" @click="$router.push('/pointposition/hezuoshang')" />
        </div>

        <div class="cooperationChart">
          <div ref="myPie" class="chart">
            <!-- 饼图 -->
          </div>

          <div class="pointCount">
            <div class="point">
              <p class="num">{{ pointTotal }}</p>
              <p class="name">点位数</p>
            </div>

            <div class="merchant">
              <p class="num">{{ cooperationTotal }}</p>
              <p class="name">合作商数</p>
            </div>

            <div class="triangle1" />
            <div class="triangle2" />
          </div>
        </div>

      </div>

      <div class="abnormal">
        <div class="head">
          <span class="title">异常设备监控</span>
          <span class="iconfont icon-gengduo icon" />
        </div>

        <div class="empty">
          <img src="https://likede2-admin.itheima.net/img/empty.87c4f71b.png">
          <p>暂无数据</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { dateInit, currentYear, currentWeek } from '@/utils/sameMonth'
// import { getPointTotal, getCooperationTotal, getWorkOrder, getPieData, getHotGoods, getSellTendency, getSellDistribution } from '@/api/home'
// import { getOrderTotal, getIncome } from '@/api/reconciliation'
// import * as echarts from 'echarts'
// export default {
//   name: 'Dashboard',
//   data() {
//     return {
//       pointTotal: 0,
//       cooperationTotal: 0,
//       start: 0,
//       end: 0,
//       count: 0,
//       income: 0,
//       workOrderTotal: 0,
//       completedWorkOrder: 0,
//       runWorkOrder: 0,
//       cancelWorkOrder: 0,
//       pieData: [],
//       brokenLineData: [],
//       columnarData: [],
//       flag: '周',
//       sellStart: 0,
//       sellEnd: 0,
//       hotList: []
//     }
//   },

//   watch: {
//     // 销售额Top5
//     pieData() {
//       this.pie.setOption({
//         tooltip: {
//           trigger: 'item',
//           formatter: `{b} <br/> 总占比: {d}%`
//         },
//         labelLine: {
//           show: true,
//           lineStyle: {
//             color: '#ccc'
//           }
//         },
//         textStyle: {
//           fontSize: '12px'
//         },
//         color: ['#85a7ff', '#99ebbd', '#ffb18b', '#c6ebff', '#becce6'],
//         series: [
//           {
//             type: 'pie',
//             radius: ['15%', '45%'],
//             center: ['55%', '26%'],
//             roseType: 'radius',
//             data: this.pieData
//           }]
//       })
//     },

//     // 销售额趋势图
//     brokenLineData() {
//       this.brokenLine.setOption({
//         title: [{
//           text: '销售额趋势图',
//           textStyle: {
//             fontSize: '16px'
//           },
//           left: 'center'
//         },
//         {
//           subtext: '单位: 元',
//           left: 26
//         }
//         ],
//         grid: {
//           left: 55
//         },
//         tooltip: {
//           trigger: 'axis',
//           formatter: `销售额: {c} <br/> {b}`
//         },

//         xAxis: {
//           type: 'category',
//           axisTick: {
//             alignWithLabel: true
//           },
//           data: this.brokenLineData.xAxis
//         },
//         yAxis: {
//           type: 'value'
//         },
//         series: {
//           data: this.brokenLineData.series,
//           type: 'line',
//           smooth: true,
//           itemStyle: {

//             normal: {
//               color: '#d8807d',
//               lineStyle: {
//                 width: 3,
//                 color: '#ff5757',
//                 shadowColor: '#ff5858',
//                 shadowOffsetY: 15,
//                 shadowBlur: 20
//               }
//             }
//           }
//         }
//       })
//     },

//     // 销售额分布
//     columnarData() {
//       this.columnar.setOption({
//         title: [{
//           text: '销售额分布',
//           left: 'center',
//           textStyle: {
//             fontSize: '16px'
//           }
//         },
//         {
//           subtext: '单位: 元',
//           left: 26

//         }],
//         tooltip: {
//           trigger: 'axis',
//           formatter: `销售额: {c} <br/> {b}`
//         },

//         xAxis: {
//           type: 'category',
//           data: this.columnarData.xAxis
//         },
//         yAxis: {
//           type: 'value'
//         },
//         grid: {
//           left: 55
//         },
//         series: [
//           {
//             data: this.columnarData.series,
//             type: 'bar',
//             barWidth: 16,
//             itemStyle: {
//               color: '#91b0ff',
//               barBorderRadius: [5, 5, 0, 0]
//             }
//           }
//         ]
//       })
//     }
//   },

//   async created() {
//   // 初始化折线图和柱状图
//     this.selectTime('周')
//     // 获取商品热榜
//     const hotGoodsList = await getHotGoods({
//       start: dateInit()[0],
//       end: dateInit()[1],
//       topValue: 10
//     })
//     this.hotList = hotGoodsList.sort((a, b) => {
//       return a - b
//     })
//     console.log(this.hotList)

//     // 点位总数
//     const res = await getPointTotal()
//     this.pointTotal = res

//     // 合作商总数
//     const data = await getCooperationTotal()
//     this.cooperationTotal = data

//     // 获取当月时间范围
//     this.start = dateInit()[0]
//     this.end = dateInit()[1]

//     // 获取本周时间范围
//     this.sellStart = currentWeek()[0]
//     this.sellEnd = currentWeek()[1]
//     // 当月销售量
//     const orderCountStatistics = await getOrderTotal({
//       start: `${this.start} 00:00:00`,
//       end: `${this.end} 23:59:59`
//     })
//     this.count = orderCountStatistics

//     // 当月销售额
//     const orderTotalMoneyStatistics = await getIncome({
//       start: `${this.start} 00:00:00`,
//       end: `${this.end} 23:59:59`
//     })
//     this.income = orderTotalMoneyStatistics

//     // 工单统计
//     const result = await getWorkOrder(
//       {
//         start: `${this.start} 00:00:00`,
//         end: `${this.end} 23:59:59`
//       }
//     )
//     // 工单总数
//     this.workOrderTotal = result.reduce((prev, item) => {
//       return prev + item.total
//     }, 0)

//     // 完成工单
//     this.completedWorkOrder = result.reduce((prev, item) => {
//       return prev + item.completedTotal
//     }, 0)

//     // 进行工单
//     this.runWorkOrder = result.reduce((prev, item) => {
//       return prev + item.progressTotal
//     }, 0)

//     // 取消工单
//     this.cancelWorkOrder = result.reduce((prev, item) => {
//       return prev + item.cancelTotal
//     }, 0)

//     // 合作商点位数Top5
//     const value = await getPieData()
//     this.pieData = value
//   },

//   updated() {
//     // 合作商点位数Top5
//     this.pie = echarts.init(this.$refs.myPie)
//     // 销售额趋势图
//     this.brokenLine = echarts.init(this.$refs.brokenLine)
//     // 销售额分布
//     this.columnar = echarts.init(this.$refs.columnar)
//   },
//   methods: {
//     async selectTime(value) {
//       this.flag = value
//       if (value === '年') {
//         this.sellStart = currentYear()[0]
//         this.sellEnd = currentYear()[1]

//         // 年的销售额趋势图数据
//         const y = await getSellTendency({
//           collectType: 2,
//           start: this.sellStart,
//           end: this.sellEnd
//         })
//         y.series.forEach((item, index, array) => {
//           array[index] = array[index] / 100
//         })

//         y.xAxis.forEach((item, index, array) => {
//           array[index] = array[index].replace('-', '年') + '月'
//           array[index] = array[index].split('')
//           array[index].splice(5, 1)
//           array[index] = array[index].join('')
//         })
//         this.brokenLineData = y

//         // 年的销售额分布
//         const yy = await getSellDistribution({
//           start: this.sellStart,
//           end: this.sellEnd
//         })
//         yy.series.forEach((item, index, array) => {
//           array[index] = array[index] / 100
//         })
//         this.columnarData = yy
//       } else if (value === '月') {
//         this.sellStart = dateInit()[0]
//         this.sellEnd = dateInit()[1]
//         // 月的销售额趋势图数据
//         const m = await getSellTendency({
//           collectType: 1,
//           start: this.sellStart,
//           end: this.sellEnd
//         })
//         console.log(m)
//         m.series.forEach((item, index, array) => {
//           array[index] = array[index] / 100
//         })

//         m.xAxis.forEach((item, index, array) => {
//           array[index] = array[index].substr(6, 5).replace('-', '月') + '日'
//           const i = array[index].substr(2, 1)
//           if (i === '0') {
//             array[index] = array[index].replace('0', '')
//           }
//         })
//         this.brokenLineData = m

//         // 月的销售额分布
//         const mm = await getSellDistribution({
//           start: this.sellStart,
//           end: this.sellEnd
//         })
//         mm.series.forEach((item, index, array) => {
//           array[index] = array[index] / 100
//         })
//         this.columnarData = mm
//       } else {
//         // 周的销售额趋势图数据
//         this.sellStart = currentWeek()[0]
//         this.sellEnd = currentWeek()[1]
//         console.log(this.sellStart, this.sellEnd)
//         const w = await getSellTendency({
//           collectType: 1,
//           start: this.sellStart,
//           end: this.sellEnd
//         })
//         w.series.forEach((item, index, array) => {
//           array[index] = array[index] / 100
//         })
//         const week = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
//         w.xAxis.forEach((item, index, array) => {
//           array[index] = week[index]
//         })
//         this.brokenLineData = w

//         // 周的销售额分布
//         const ww = await getSellDistribution({
//           start: this.sellStart,
//           end: this.sellEnd
//         })
//         ww.series.forEach((item, index, array) => {
//           array[index] = array[index] / 100
//         })
//         this.columnarData = ww
//       }
//     }
//   }

// }
</script>

<style lang="scss" scoped>
.active{
   width: 44px;
   height: 26px;
   font-size: 20px;
   text-align: center;
   line-height: 26px;
   border-radius: 8px;
   color: #000 !important;
   font-weight: 700;
   background-color: #fff;
}
*{
  margin: 0;
  padding: 0;
}
ul{
  list-style: none;
}
.root{
  background-color: #f8fafd;
  padding: 20px;
  .icon{
    font-size: 18px;
    color:  #6387ff;
    cursor: pointer;
  }
  .title{
      font-size: 16px;
      font-weight: 600;
      color: rgb(51,51,51)
    }
  .container{
    display: flex;
    justify-content: space-between;
    width: 100%;

    .time{
      margin-left: 10px;
      font-size: 12px;
      font-weight: 400;
      color: rgb(153,153 ,153);
    }

    .content{
      width: 75%;
      margin-right: 20px;
       .statistics{
        width: 100%;
        display: flex;
        justify-content: space-between;
        .workOrder{
          width: 56%;
          height: 150px;
          margin-right: 20px;
          border-radius: 20px;
          background: url() 0px 0px no-repeat,url(https://likede2-admin.itheima.net/img/task.66b715b7.png) calc(100% - 12px) 100% no-repeat rgb(233, 243, 255);
          .data{
            margin-left: -30px;
          }

        }
        .sell{
          width: 45%;
          height: 150px;
          border-radius: 20px;
          background: url(https://likede2-admin.itheima.net/img/sale.606b0d8c.png) calc(100% - 12px) 100% no-repeat rgb(251, 239, 232);
          .num{
           color: #ff5757 !important;
           text-shadow: 2px 4px 7px rgba(255,99,85,.5) !important;
      }
      .type{
        color: #de9690 !important;
      }
        }

        .workOrder,
        .sell{
          padding: 20px;
          .data{
          margin-top: 30px;
      ul{
        display: flex;
        justify-content: space-around;
        li{
          display: flex;
          flex-direction: column;
          align-items: center;
          .num{
            font-size: 36px;
            font-weight: 600;
            color: #072074;
            text-shadow: 2px 4px 7px rgba(85,132,255,5);
            margin-bottom: 10px;
          }
          .type{
            font-size: 12px;
            font-weight: 400;
            color: #91a7dc;
          }
        }
      }
    }
        }
       }

       .sellData{
        width: 100%;
        height: 380px;
       border-radius: 20px;
       margin-top: 20px;
        background-color: #fff;
        .chart{
          display: flex;

          .tendencyChart,
          .distribution{
            width: 480px;
            height: 280px;
            margin-top: 30px;
            background-color: #fff;
          }
    .tendencyChart{
       margin-left: 30px;
    }
        }
        .sellNav{
          display: flex;
          justify-content: space-between;
          padding: 20px;
          .right{
            width: 160px;
            height: 36px;
            border-radius: 10px;
            line-height: 36px;
            background-color: #f7fbff;
            ul{
              display: flex;
              justify-content: center;
              align-items: center;
              list-style: none;
              li{
                cursor: pointer;
                margin: 2px 12px;
                color: #9ca3b4;
                font-size: 14px;
              }
            }
          }
        }
       }
    }

    // 商品热榜
    .sideModule{
      width: 45%;
      height: 550px;
      border-radius: 20px;
      background-color: #fff;
      .head{
        height: 26px;
        padding: 20px;
      }

      .hotGoods{
        padding: 0 30px;
        ul{
          li{
            display: flex;
            margin: 28px 0;
            .goodBgc{
              width: 21px;
              height: 20px;
              font-size: 12px;
              line-height: 14px;
              text-align: center;
              color: #8e5900;
              margin-right: 24px;
            }
            .first{
              background: url();
            }
            .second{
              color: #494949 !important;
              background: url();
            }
            .third{
              color: #cf6d3d !important;
              background: url();
            }

            .last{
              color: #e9b499 !important;
              background: url();
            }

            .good{
              height: 20px;
              line-height: 20px;
              font-size: 14px;
              font-weight: 500;
              color: #333;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            .count{
              position: absolute;
              right: 46px;
              height: 20px;
              line-height: 20px;
              color: #737589;
              font-weight: 400;
              font-size: 14px;
            }
          }
        }
      }
    }
  }

  .footer{
    display: flex;
    height: 340px;
    width: 100%;
    margin-top: 20px;
    .chart{
      width: 520px;
      height: 420px;
      padding-left: 50px;
    }
    .head{
      display: flex;
      justify-content: space-between;
    }
   .cooperation{
     width: 60%;
    border-radius: 20px;
    margin-right: 20px;
    padding: 20px;
    background-color: #fff;
    .cooperationChart{
      display: flex;
      margin-top: 40px;
      margin-left: -70px;
      .pointCount{
        position: relative;
        width: 154px;
        height: 230px;
        background-color: #f8f8f9;
        padding-left: 38px;
        padding-top: 47px;
        margin-left: 90px;

        .triangle1,
        .triangle2{
          width: 0;
          height: 0;
          border: 16px solid transparent;
          border-top-color: #fff;
        }

        .triangle1{
          position: absolute;
          top: -16px;
          right: -16px;
          transform: rotate(225deg);
        }
        .triangle2{
          position: absolute;
          bottom: -16px;
          left: -16px;
          transform: rotate(45deg);
        }
        .merchant{
          margin-top: 20px;
        }
        .num{
          height: 33px;
          line-height: 33px;
          font-size: 24px;
          font-weight: 600;
          color: #072074;
        }
        .name{
          height: 17px;
          line-height: 17px;
          margin-top: 6px;
          font-size: 12px;
          font-weight: 400;
          color: #000412;
        }
      }
    }
   }

   .abnormal{
    width: 40%;
    height: 340px;
    border-radius: 20px;
    padding: 20px;
    background-color: #fff;
    .empty{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-top: 70px;
      p{
        margin-top: 25px;
        color: rgb(32, 35, 42);
        font-size: 14px;
      }
    }
   }

  }
}
</style>
